<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue的经常用的方法，如果用不到你可以打我</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <style>
        .article {
            color: aqua;
        }
        .active {
            color: red
        }
        
        .error {
            color: blue
        }
      
    </style>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>
    <input type="text" v-model="msg"> //输入可触发这两个 beforeUpdate  updated
    <div>
        <my-son  v-if="show" @son-fun="clickFun"></my-son>
        <button @click="clickFun">点击触发beforeDestroy destroyed</button>
    </div>
  
    <h5>查看控制台可看出生命周期的变化</h5>
    <hr>
    <h1>watch设置计算computed</h1>
    <div id="myApp">
        <!--        watch设置计算computed-->
        <p>Switch的价格是：{{price}}，含税价格为：{{priceInTax}}，折合人民币为：{{priceChinaRMB}}元。</p>
        <button @click="btnClick(10000)">加价10000 </button>
    </div>
    <hr>
    <h1>:class </h1>
    <!--    v-bind:class 单为html标记绑定样式单class属性。-->
    <div v-bind:class="{active:isActive}"> v-bind:class="{active:isActive}"</div>
    <div :class="{active:isActive}">. :class="{active:isActive}"</div>
    <!--    :class 对象 为html标记绑定样式单class对象。-->
    <div :class="myClassObj"> :class="myClassObj"</div>
    <!--    :class 数组 为html标记绑定样式单class数组。-->
    <div :class="[atvieClass,errorClass]">:class="[atvieClass,errorClass]"</div>
    <!--    :class 数组 为html标记绑定样式单class数组。 使用三元表达式，根据条件切换class（当数据isActive为真时，样式active才会被应用）-->
    <div :class="[isActive ? atvieClass : '',errorClass]">:class="[isActive ? atvieClass : '',errorClass]"</div>
    <!--    :class 数组 为html标记绑定样式单class数组。 使用二元表达式，根据条件切换class（当数据isActive为真时，样式active不会被应用）-->
    <div :class="[isActive || atvieClass  ,errorClass]"> :class="[isActive || atvieClass ,errorClass]"</div>
    <!--    :class 数组 为html标记绑定样式单class数组。class有多个条件时，这样写较为烦琐，可以在数组语法中使用对象语法：-->
    <div :class="[{'active':isActive},errorClass]">:class="[{'active':isActive},errorClass]"</div>
    <!--    :class 数组 为html标记绑定样式单class数组。 -->
    <div :class="myClassArr"> :class="myClassArr"</div>
<!--     可以使用data、computed、method三种方法，以计算属性为例：-->
    <div :class="classes">
        computed: {
            classes: function () {
            return [
            'btn',
            {
            ['btn-' + this.size]: this.size !== '',
            ['btn-disabled']: this.disabled,
            }
            ]
            }
        },
    </div>
    <!--     可以使用组件使用class或:class 样式规则会直接应用到这个组件的根元素上，满足条件就递增-->
    <my-component :class="{active:isActive}"></my-component>
    <button @click="btnClick1">改变class吧</button>
    <hr>
    <h1>filters </h1>
<!--    filters-->
    <p>正常：{{message}}</p>
    <p>转大写：{{message | toupper }}</p>
    
    <p>vue的掌握进度：{{num}}({{num | topercentage}})。</p>
    <h1>JS数组循环</h1>
    <ul>
        <li v-for="(game, index) in myArr">({{index}}) {{game.title}} ：{{game.age}}</li>
    </ul>
    <hr>
    
    <h1>JS对象迭代</h1>
    <div v-for="(value, key) in myObj" :key="key">
        {{ key }} : {{ value }}
    </div>
    
    <hr>
    
    <h1>slot 插槽 (单个)</h1>
    <h5>slot是父组件与子组件的通讯方式，可以将父组件的内容显示在子组件当中。</h5>
    <my-slot pname="koma" v-for="value  in 3" :key="value">
        我是插槽{{value}}
    </my-slot>
    <h1>slot 插槽 (多个混合) </h1>
    <h5>在子组件中通过为多个slot进行命名,来接受父组件的不同内容的数据。</h5>
    <my-slot-list w="荒天帝" h="海神">
        <span>默认</span>
        <span slot="xy">炎帝</span>
        <span slot="zx">凡帝</span>
        <span slot="zc">紫川秀</span>
        <span slot="zd">紫川秀1</span>
    </my-slot-list>
</div>
</body>

<script>
    // 实例销毁后，用于清除定时器、网络请求等还未结束的操作


    Vue.component('my-son', {
        template: '<p class="active" @click="click1">my-son是自定义组件,点击隐藏即可触发销毁的生命周期</p>',
        data() {
            return {
                timmer: null
            }
        },
        methods:{
            click1(){
                this.$emit('son-fun',"1")
            }
        },
        mounted() {
            // this.timmer= setInterval(() => {
            //     console.log(1)
            // }, 1000);
        },
        beforeDestroy: function () {
            clearInterval(this.timer)
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "msg: " + this.msg);
        },
        destroyed: function () {
            clearInterval(this.timer)
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "msg: " + this.msg)
        }
    })
 
    Vue.component('my-component', {
        template: '<p class="article">my-component</p>'
    })
    // 单个插槽
    Vue.component('my-slot', {
        props: ['pname'],
        template: '<div>'
              + '你好，<strong>{{pname}}</strong>！'
              + '<slot></slot>'
              + '</div>',
    });
    // 多个插槽 混合
    Vue.component('my-slot-list', {
        props: ['w', 'h'],
        template: '<div>'
              + '<div>完美世界：{{w}}</div>'
              + '<div>斗罗大陆 ：{{h}}</div>'
              + '<div>默认：<slot></slot></div>'
              + '<div>斗破苍穹：<slot name="xy"></slot></div>'
              + '<div>诛仙：<slot name="zx"></slot></div>'
              + '<div>紫川：<slot name="zc"></slot></div>'
              + '<div>小凡：<slot name="zd" :row="w"></slot></div>'
              + '</div>',
    });
    var vm = new Vue({
        el: '#app',
        data: {
            show:true,
            timer:null,
            message: 'vue is my friend',
            num: 0.9,
            msg: 'Vue的生命周期触发时机',
            price: 29980,
            // priceInTax: 0,
            // priceChinaRMB: 0,
            isActive: true,
            atvieClass: 'active',
            errorClass: 'error',
            size: 'nomal',
            myClassObj: {
                active: true,
                big: true,
            },
            myClassArr: ['error', 'active'],//根据css定义的样式，最后的定义的样式覆盖前者
            myObj:{
                name1: "荒天帝",
                name2: "海神",
                name3: "修罗神",
                name4: "炎帝",
            },
            myArr:[
                {title:"荒天帝",age:"1500岁"},
                {title:"修罗神",age:"1000岁"},
                {title:"炎帝",age:"1800岁"},
                {title:"海神",age:"900岁"},
            ]
        },
        filters: {
            toupper: function(value){
                return value.toUpperCase();
            },
            topercentage: function(value){
                return value * 100 + '%';
            },
        },
        //   watch设置计算computed属性，同步更新元数据的值。

        // 处理元数据，便于进行二次利用。（比如：消费税自动计算功能）
        computed: {
            priceInTax: function () {
                return this.price * 1.08;
            },
            priceChinaRMB: function () {
                return Math.round(this.priceInTax / 16.75);
            },
            classes: function () {
                return [
                    'btn',
                    {
                        ['btn-' + this.size]: this.size !== '',
                        ['btn-disabled']: this.disabled,
                    }
                ]
            }
        },
        // $watch 与computed属性类似，用于观察变量的变化，然后进行相应的处理
        // watch: {
        //     price: function(newVal, oldVal){
        //         console.log(newVal, oldVal);
        //         this.priceInTax = Math.round(this.price * 1.08);
        //         this.priceChinaRMB = Math.round(this.priceInTax / 16.75);
        //     },
        // },
        methods: {
            clickFun(v){
                console.log(v,"传值")
                this.show = !this.show
            },
            btnClick1: function () {
                this.isActive = false;
                this.myClassObj.active = false;
                this.errorClass = "";
            },
            btnClick: function (newPrice) {
                this.price += newPrice;
            },
        },
        beforeCreate: function () {
            console.group('------beforeCreate创建前的状态------');
            console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red", "data   : " + this.$data); //undefined
            console.log("%c%s", "color:red", "msg: " + this.msg)
        },
        created: function () {
            console.group('------created创建完毕的状态------');
            console.log("%c%s", "color:green", "el     : " + this.$el); //undefined
            console.log("%c%s", "color:green", "data   : " + JSON.stringify(this.$data)); //已被初始化
            console.log("%c%s", "color:green", "msg: " + this.msg); //已被初始化
        },
        beforeMount: function () {
            console.group('------beforeMount挂载前的状态------');
            console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
            console.log("已被初始化的----", this.$el);
            console.log("%c%s", "color:red", "data   : " + JSON.stringify(this.$data)); //已被初始化
            console.log("%c%s", "color:red", "msg: " + this.msg); //已被初始化
        },
        mounted: function () {
            console.group('------mounted 挂载结束状态------');
            console.log("%c%s", "color:blue", "el     : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:blue", "data   : " + JSON.stringify(this.$data)); //已被初始化
            console.log("%c%s", "color:blue", "msg: " + this.msg); //已被初始化
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + JSON.stringify(this.$data));
            console.log("%c%s", "color:red", "msg: " + this.msg);
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "msg: " + this.msg);
        },
        beforeDestroy: function () {
            clearTimeout(this.timer)
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "msg: " + this.msg);
        },
        destroyed: function () {
            clearTimeout(this.timer)
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "msg: " + this.msg)
        }
    })
</script>
</html>
